<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>交流中心</title>
<link rel="stylesheet" type="text/css" href="../static/css/common.css"/>
<link rel="stylesheet" type="text/css" href="../static/css/chat.css"/>
<link rel="stylesheet" type="text/css" href="../static/css/jquery.jscrollpane.css"/>
<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../static/js/vchat.js"></script>
<script type="text/javascript" src="../static/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../static/js/jquery.jscrollpane.min.js"></script>
<!--[if lt IE 7]>
<script src="../static/js/IE7.js" type="text/javascript"></script>
<![endif]-->
</head>

<body class="bg">
<button id="vLeftShow" style="position:absolute; left:10px; top:10px; width:120px;">A左边视频展现 *</button>
<button id="vRightJoin" style="position:absolute; left:10px; top:40px; width:120px;">A右边视频加入</button>
<button id="vRightExit" style="position:absolute; left:10px; top:70px; width:120px;">A右边视频退出</button>
<button id="vRightShow" style="position:absolute; left:10px; top:100px; width:120px;">B右边视频先展现 *</button>
<button id="vLeftJoin" style="position:absolute; left:10px; top:130px; width:120px;">B左边视频加入</button>
<button id="vLeftExit" style="position:absolute; left:10px; top:160px; width:120px;">B左边视频退出</button>
<button id="videoHide" style="position:absolute; left:10px; top:190px; width:120px;">C视频区域隐藏 *</button>
<div class="wrap">
	<div class="container">
		<div class="main">
			<div class="vchat-container">
				<div class="dialog-content">
					<div class="dialog-title">
						<h3>交流中心</h3>
						<a class="close" href="javascript:;">关闭</a> </div>
					<div class="vchat-wrap">
						<!--Video Area-->
						<div id="vchatArea" class="vchat-disp-wrap">
							<ul>
								<li id="vchatDispLeft" class="v-disp-item">
									<div class="vchat-window">
										<img src="../static/images/videouser1.jpg" />
									</div>
									<div class="user-name">
										<span class="admin-icon"></span><span>Sean Farrell</span>
									</div>
								</li>
								<li id="vchatDispRight" class="v-disp-item">
									<div class="vchat-window">
										<img src="../static/images/videouser2.jpg" />
									</div>
									<div class="user-name">
										<span>Toni Gemayel</span>
									</div>
								</li>
							</ul>
							<a id="recBtn" class="rec-btn" href="javascript:;"></a>
							<span class="count-time">04:15</span>
						</div>
						<!--Video Area End-->
						<!--Text Chat Area-->
						<div id="tchatArea" class="text-chat-wrap" style="height:630px">
							<div class="text-chat-main">
								<div id="chatListWrap" style="height:525px;">
									<ul id="chatMsgList" class="chat-msg-list">
										<li class="odd role-admin">
											<div class="u-avatar">
												<img src="../static/images/u-avatar.png" />
												<a class="e-vcard" href="javascript:;"></a>
											</div>
											<dl>
												<dt>Administrator</dt>
												<dd>what do you want to talk about?  how people are reading this co</dd>
											</dl>
										</li>
										<li class="role-myself">
											<div class="u-avatar">
												<img src="../static/images/u-avatar.png" />
												<a class="e-vcard" href="javascript:;"></a>
											</div>
											<dl>
												<dt>我对<span class="other-name">所有人</span>说</dt>
												<dd>what do you want to talk about?  how people are reading this co</dd>
											</dl>
										</li>
										<li class="odd">
											<div class="u-avatar">
												<img src="../static/images/u-avatar.png" />
												<a class="e-vcard" href="javascript:;"></a>
											</div>
											<dl>
												<dt>Sean Farrell</dt>
												<dd>what do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading this co</dd>
											</dl>
										</li>
										<li>
											<div class="u-avatar">
												<img src="../static/images/u-avatar.png" />
												<a class="e-vcard" href="javascript:;"></a>
											</div>
											<dl>
												<dt>Sean Farrell</dt>
												<dd>what do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading this co</dd>
											</dl>
										</li>
										<li class="odd">
											<div class="u-avatar">
												<img src="../static/images/u-avatar.png" />
												<a class="e-vcard" href="javascript:;"></a>
											</div>
											<dl>
												<dt>Sean Farrell</dt>
												<dd>what do you want to talk about?  how people are reading this co</dd>
											</dl>
										</li>
										<li class="role-myself">
											<div class="u-avatar">
												<img src="../static/images/u-avatar.png" />
												<a class="e-vcard" href="javascript:;"></a>
											</div>
											<dl>
												<dt>Sean Farrell</dt>
												<dd>what do you want to talk about?  how people are reading this co</dd>
											</dl>
										</li>
										<li class="odd">
											<div class="u-avatar">
												<img src="../static/images/u-avatar.png" />
												<a class="e-vcard" href="javascript:;"></a>
											</div>
											<dl>
												<dt>Sean Farrell</dt>
												<dd>what do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading this co</dd>
											</dl>
										</li>
										<li>
											<div class="u-avatar">
												<img src="../static/images/u-avatar.png" />
												<a class="e-vcard" href="javascript:;"></a>
											</div>
											<dl>
												<dt>Sean Farrell G11111111111</dt>
												<dd>what do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading this co</dd>
											</dl>
										</li>
									</ul>
								</div>
							</div>
							<div class="text-chat-btm">
								<div class="text-chat-l">
									<div class="text-controls">
										<div class="text-style-item">
                           					<label>
												<input type="checkbox" id="underlinePost" class="ckbx">
												<span class="underline-icon"></span>
											</label>
										</div>
										<div class="text-style-item">
                           					<label>
												<input type="checkbox" id="boldPost" class="ckbx">
												<span class="bold-icon"></span>
											</label>
										</div>
										<div class="text-style-item">
                           					<label>
												<input type="checkbox" id="italicPost" class="ckbx">
												<span class="italic-icon"></span>
											</label>
										</div>
										<div class="text-color-wrap">
											<div id="selectColor" class="txt-cur-color" style=" background-color:rgb(0,0,0)"></div>
											<div class="t-arrow"></div>
											<div id="colorArea" class="text-color-container">
												<ul class="text-color-list">
													<li><a href="javascript:;" data-color="rgb(0, 0, 0)" title="rgb(0, 0, 0)" style="background-color:rgb(0, 0, 0);"></a></li>
													<li><a href="javascript:;" data-color="rgb(0, 0, 132)" title="rgb(0, 0, 132)" style="background-color:rgb(0, 0, 132);"></a></li>
													<li><a href="javascript:;" data-color="rgb(0, 0, 255)" title="rgb(0, 0, 255)" style="background-color:rgb(0, 0, 255);"></a></li>
													<li><a href="javascript:;" data-color="rgb(132, 0, 0)" title="rgb(132, 0, 0)" style="background-color:rgb(132, 0, 0);"></a></li>
													<li><a href="javascript:;" data-color="rgb(132, 0, 132)" title="rgb(132, 0, 132)" style="background-color:rgb(132, 0, 132);"></a></li>
													<li><a href="javascript:;" data-color="rgb(0, 130, 0)" title="rgb(0, 130, 0)" style="background-color:rgb(0, 130, 0);"></a></li>
													<li><a href="javascript:;" data-color="rgb(255, 0, 0)" title="rgb(255, 0, 0)" style="background-color:rgb(255, 0, 0);"></a></li>
													<li><a href="javascript:;" data-color="rgb(0, 130, 132)" title="rgb(0, 130, 132)" style="background-color:rgb(0, 130, 132);"></a></li>
													<li><a href="javascript:;" data-color="rgb(255, 0, 255)" title="rgb(255, 0, 255)" style="background-color:rgb(255, 0, 255);"></a></li>
													<li><a href="javascript:;" data-color="rgb(132, 130, 0)" title="rgb(132, 130, 0)" style="background-color:rgb(132, 130, 0);"></a></li>
													<li><a href="javascript:;" data-color="rgb(132, 130, 132)" title="rgb(132, 130, 132)" style="background-color:rgb(132, 130, 132);"></a></li>
													<li><a href="javascript:;" data-color="rgb(0, 255, 0)" title="rgb(0, 255, 0)" style="background-color:rgb(0, 255, 0);"></a></li>
													<li><a href="javascript:;" data-color="rgb(255, 166, 0)" title="rgb(255, 166, 0)" style="background-color:rgb(255, 166, 0);"></a></li>
													<li><a href="javascript:;" data-color="rgb(0, 255, 255)" title="rgb(0, 255, 255)" style="background-color:rgb(0, 255, 255);"></a></li>
													<li><a href="javascript:;" data-color="rgb(198, 195, 198)" title="rgb(198, 195, 198)" style="background-color:rgb(198, 195, 198);"></a></li>
												</ul>
											</div>
										</div>
									</div>
									<textarea id="textInput" class="text-input"></textarea>
									<a id="clearTextBtn" class="clear-text-btn" href="javascript:;" title="清空内容"></a>
								</div>
								<div class="text-chat-r">
									<div id="selectChatUser" class="select-user">
										<span id="selectedUser" class="cur-user" title="所有人">所有人</span>
										<em class="arrow-icon"></em>
										<div id="userListWrap" class="user-list-wrap">
											<div id="userList" class="user-list">
												<ul>
													<li><a href="javascript:;" title="所有人">所有人</a></li>
													<li><a class="c-red" href="javascript:;" title="Administrator">Administrator</a></li>
													<li><a href="javascript:;" title="哈哈哈哈">哈哈哈哈</a></li>
													<li><a href="javascript:;" title="Jim.Green">Jim.Green</a></li>
													<li><a href="javascript:;" title="Mike Zhang">Mike Zhang</a></li>
													<li><a href="javascript:;" title="Meimei.Han">Meimei.Han</a></li>
													<li><a href="javascript:;" title="罗永浩">罗永浩</a></li>
													<li><a href="javascript:;" title="刘铁牛">刘铁牛</a></li>
													<li><a href="javascript:;" title="Tony Stark">Tony Stark</a></li>
													<li><a href="javascript:;" title="王自如">王自如</a></li>
													<li><a href="javascript:;" title="崔成浩">崔成浩</a></li>
													<li><a href="javascript:;" title="Nicke G.L">Nicke G.L</a></li>
													<li><a href="javascript:;" title="Daisy Yan">Daisy Yan</a></li>
													<li><a href="javascript:;" title="Feil Wang">Feil Wang</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<a id="submitMsgBtn" class="send-btn" href="javascript:;"></a>
								<div class="clear"></div>
							</div>				
						</div>
						<!--Text Chat Area End-->
						<!--Right Top Area-->
						<div class="vchat-info-wrap">
							<div class="status-tips">状态：连接中</div>
							<div class="v-logo">
								<img src="../static/images/v-logo.png" />
							</div>	
							<div class="v-info">展视互动大学</div>		
							<div class="request-area">
								<a class="vchat-btn request-video" href="javascript:;"></a>
								<a class="vchat-btn request-voice" href="javascript:;"></a>
							</div>
						</div>
						<!--Right Top Area End-->
						<!--Righ Bottom Area-->
						<div class="participant-wrap">
							<h3>参加者<span class="num">14</span></h3>
							<div id="participantScroll" class="participant-list-area">
								<ul class="participant-list">
									<li>
										<span class="admin-icon"></span>
										<a class="name role-admin" href="javascript:;">Administrator</a>
										<span class="camera-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">哈哈哈哈</a>
									</li>
									<li>
										<a class="name" href="javascript:;">Jim.Green</a>
										<span class="camera-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">Mike Zhang</a>
										<span class="mic-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">Clark Tang</a>
										<span class="h-camera-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">Meimei.Han</a>
										<span class="h-mic-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">罗永浩</a>
										<span class="camera-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">刘铁牛</a>
									</li>
									<li>
										<a class="name" href="javascript:;">Tony Stark</a>
										<span class="camera-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">王自如</a>
										<span class="mic-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">崔成浩</a>
									</li>
									<li>
										<a class="name" href="javascript:;">Nicke G.L</a>
										<span class="camera-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">Daisy Yan</a>
									</li>
									<li>
										<a class="name" href="javascript:;">Feil Wang</a>
									</li>
									<li>
										<a class="name" href="javascript:;">Tony Stark</a>
										<span class="camera-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">王自如</a>
										<span class="mic-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">崔成浩</a>
									</li>
									<li>
										<a class="name" href="javascript:;">Nicke G.L</a>
										<span class="camera-icon"></span>
									</li>
									<li>
										<a class="name" href="javascript:;">Daisy Yan</a>
									</li>
									<li>
										<a class="name" href="javascript:;">Feil Wang !!!!!!</a>
									</li>
								</ul>
							</div>
						</div>
						<!--Righ Bottom Area End-->
					</div>
				</div>
				<table class="dialog-cover" border="0" cellpadding="0" cellspacing="0">
					<tbody>
						<tr>
							<td class="d-l-t">&nbsp;</td>
							<td class="d-m-t">&nbsp;</td>
							<td class="d-r-t">&nbsp;</td>
						</tr>
						<tr>
							<td class="d-l-m">&nbsp;</td>
							<td class="d-m-m">&nbsp;</td>
							<td class="d-r-m">&nbsp;</td>
						</tr>
						<tr>
							<td class="d-l-b">&nbsp;</td>
							<td class="d-m-b">&nbsp;</td>
							<td class="d-r-b">&nbsp;</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
</body>
</html>
